<template>
    <div
        style="margin-bottom: 5px;height: 30px;width: 60px;border: 1px solid #ccc;cursor: pointer;display: flex;box-shadow: 0 1px 1px 1px #7e7e7e;justify-content: center;align-items: center;border-radius: 10px;background: rgb(252,246,0) "
        @click="shoufang">{{ isContainerVisible ? '收起' : '展开' }}
    </div>
    <el-container
        v-if="isContainerVisible"
        class="container1-class"
        :style="{ backgroundImage: backgroundImage ? `url(${backgroundImage})` : '', backgroundSize: 'cover', backgroundPosition: 'center' }"
        :class="{ 'animate-bg': isAnimating }">
      <p style="position: absolute;bottom: 3px;font-weight: 700;left: 10px;font-size: 20px;font-family: Sans-Serif">{{backgroundImagetitle}}</p>
      <div class="carousel-wrapper">
        <el-carousel :interval="4000" type="card"  height="140px" indicator-position="none" :autoplay="true" :loop="true" card-scale="1">
          <template #prev-arrow><i class="el-icon-arrow-left"></i></template>
          <template #next-arrow><i class="el-icon-arrow-right"></i></template>
          <el-carousel-item v-for="(course, index) in courses"  :key="index" style=";margin-left: 54px;width: 23%; height:100%; display: inline-block;">
            <img v-if="course.image" :src="`http://localhost:8080/img?imgUrl=${course.image}`" style="width: 100%; height: 100%; object-fit: cover;border-radius: 6px;" alt="课程图片" @click="handleImageClick(course.image)">
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-container>
    <div style="display: flex;justify-content: space-around;margin: 20px;height: 100px;gap:10px" ref="contentArea">
      <div class="btn"
           :style="{
         background: '#409EFF',
         transform: pageid === 0 ? 'scale(0.97) translateY(2px)' : 'none'
       }"
           @click="changepageid(0)">全部课程</div>
  
      <div class="btn"
           :style="{
         background: '#228522',
         transform: pageid === 1 ? 'scale(0.97) translateY(2px)' : 'none'
       }"
           @click="changepageid(1)">课程订单</div>
  
      <div class="btn"
           :style="{
         background: 'red',
         transform: pageid === 2 ? 'scale(0.97) translateY(2px)' : 'none'
       }"
           @click="changepageid(2)">课程评价</div>
  
      <div class="btn"
           :style="{
         background: 'yellow',
         transform: pageid === 3 ? 'scale(0.97) translateY(2px)' : 'none'
       }"
           @click="changepageid(3)">课程分类</div>
  
      <div class="btn"
           :style="{
         background: 'gray',
         transform: pageid === 4 ? 'scale(0.97) translateY(2px)' : 'none'
       }"
           @click="changepageid(4)">课程交流</div>
    </div>
    <el-container v-if="pageid===0" class="course-container">
      <!-- 搜索区域 -->
      <el-header class="search-header">
        <el-row :gutter="20" justify="space-between" align="middle">
          <el-col :span="6">
            <el-input v-model="searchForm.courseName" placeholder="课程名称" clearable>
              <template #prefix><i class="el-icon-search"></i></template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="searchForm.consultantId" placeholder="咨询师编号" clearable>
              <template #prefix><i class="el-icon-menu"></i></template>
            </el-input>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
            <el-button plain icon="Plus" @click="handleAdd">新增课程</el-button>
          </el-col>
        </el-row>
      </el-header>
  
      <!-- 课程表格 -->
      <el-main class="main-content">
        <el-table
            :data="courses"
            stripe
            border
            style="width: 100%"
            v-loading="loading"
            element-loading-text="加载中..."
            :header-cell-style="{ background: '#f5f7fa' }"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="60" />
          <el-table-column prop="courseName" label="课程名称" width="180" />
          <el-table-column prop="image" label="封面图片" width="150">
            <template #default="scope">
              <img :src="`http://localhost:8080/img?imgUrl=${scope.row.image}`"
                   alt="Image" style="width: 100px; height: 60px; object-fit: cover;"/>
            </template>
          </el-table-column>
          <el-table-column prop="videoFileName" label="视频文件" width="200">
            <template #default="{ row }">
              <span v-if="row.videoFileName" class="file-link">{{ row.videoFileName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="currentPrice" label="现价" width="100">
            <template #default="{ row }">￥{{ row.currentPrice.toFixed(2) }}</template>
          </el-table-column>
          <el-table-column prop="studyCount" label="学习次数" width="100" />
          <el-table-column prop="collectionCount" label="收藏量" width="100" />
          <el-table-column prop="validityPeriod" label="有效期(天)" width="100" />
          <el-table-column prop="intro" label="简介" width="120" />
          <el-table-column prop="targetAudience" label="适用人群" width="150" />
          <el-table-column prop="totalDuration" label="总时长" width="150" />
          <el-table-column prop="learningOutcomes" label="学习收获" width="100" />
          <el-table-column prop="subscriptionNote" label="订阅须知" width="100" />
          <el-table-column prop="consultantId" label="咨询师编号" width="100" />
          <el-table-column prop="consultantName" label="咨询师姓名" width="100" />
        
          <el-table-column prop="collectionCount" label="收藏量" width="100" />
          <el-table-column prop="reviewCount" label="评价量" width="100" />
          <el-table-column prop="materialCount" label="课件数量" width="100" />
          <el-table-column prop="shangXianTime" label="上架时间" width="100" />
          <el-table-column prop="categoryId" label="分类编号" width="100" />
          <el-table-column label="操作" fixed="right" width="320">
            <template #default="scope">
              <el-button type="info" size="small" @click="handleDetail(scope.row)">详情</el-button>
              <el-button type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="success" size="small" @click="handleViewVideo(scope.row)">查看视频</el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="handleDeleteConfirm(scope.row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <!-- 分页组件 -->
        <div class="pagination-wrapper">
          <el-pagination
              :current-page="currentPage"
              :page-size="pageSize"
              :page-sizes="[100,200]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-main>
  
      <!-- 弹窗组件 -->
      <el-dialog
          v-model="dialogVisible"
          :title="currentDialogType === 'add' ? '添加课程' : currentDialogType === 'edit' ? '编辑课程' : '课程详情'"
          :width="currentDialogType === 'detail' ? '80%' : '600px'"
          class="course-dialog"
      >
        <el-form :model="form" :rules="rules" ref="formRef" label-width="130px" class="dialog-form">
          <!-- 基础信息 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="课程名称" prop="courseName">
                <el-input v-model="form.courseName" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分类编号" prop="categoryId">
                <el-input v-model="form.categoryId" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="总时长（分钟）" prop="totalDuration">
                <el-input v-model="form.totalDuration" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效期（天）" prop="validityPeriod">
                <el-input-number v-model="form.validityPeriod" :min="1" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 统计信息（只读） -->
          <el-row :gutter="20" class="stats-row">
            <el-col :span="8">
              <el-form-item label="学习次数" prop="studyCount">
                <el-input
                    v-model.number="form.studyCount"
                    :disabled="currentDialogType !== 'add'"
                    class="stats-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="收藏量" prop="collectionCount">
                <el-input
                    v-model.number="form.collectionCount"
                    :disabled="currentDialogType !== 'add'"
                    class="stats-input"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="评价量" prop="reviewCount">
                <el-input
                    v-model.number="form.reviewCount"
                    :disabled="currentDialogType !== 'add'"
                    class="stats-input"
                />
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 媒体信息 -->
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="封面图片" prop="image">
                <el-upload
                    ref="uploadRef"
                    class="avatar-uploader"
                    action="#"
                    :auto-upload="false"
                    :show-file-list="false"
                    :before-upload="beforeUpload"
                    :on-change="(file) => customUpload({ file: file.raw })"
                >
                  <template #trigger>
                    <div class="upload-area">
                      <img v-if="form.image" :src="`http://localhost:8080/img?imgUrl=${form.image}`" class="avatar" />
                      <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </div>
                  </template>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="视频文件" prop="videoFileName">
                <el-upload
                    v-if="currentDialogType !== 'detail'"
                    class="video-uploader"
                    :action="uploadUrl"
                    :headers="uploadHeaders"
                    :on-success="handleVideoUploadSuccess"
                    :before-upload="beforeVideoUpload"
                    :show-file-list="false"
                >
                  <el-button type="primary" icon="Upload">上传视频</el-button>
                </el-upload>
                <div v-else class="video-info">
                  <span>{{ form.videoFileName }}</span>
                  <el-button type="text" icon="Play" @click="handlePlayVideo"></el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 价格信息 -->
          <el-row :gutter="20" class="price-row">
            <el-col :span="12">
              <el-form-item label="原价" prop="originalPrice">
                <el-input-number v-model="form.originalPrice" :precision="2" :min="0" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="现价" prop="currentPrice">
                <el-input-number v-model="form.currentPrice" :precision="2" :min="0" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 详细信息 -->
          <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="咨询师编号" prop="consultantId">
                <el-input v-model="form.consultantId" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="咨询师编号" prop="consultantName">
                <el-input v-model="form.consultantName" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="课件数量" prop="materialCount">
                <el-input-number v-model="form.materialCount" :min="0" :disabled="currentDialogType !== 'add'" />
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 时间信息 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="上架时间" prop="shangXianTime">
                <el-date-picker
                    v-model="form.shangXianTime"
                    type="datetime"
                    placeholder="选择上架时间"
                    :disabled="currentDialogType !== 'add'"
                />
              </el-form-item>
            </el-col>
          </el-row>
  
          <!-- 描述信息 -->
          <el-form-item label="简介" prop="intro">
            <el-input type="textarea" v-model="form.intro" :rows="3" />
          </el-form-item>
          <el-form-item label="适用人群" prop="targetAudience">
            <el-input type="textarea" v-model="form.targetAudience" :rows="2" />
          </el-form-item>
          <el-form-item label="学习收获" prop="learningOutcomes">
            <el-input type="textarea" v-model="form.learningOutcomes" :rows="3" />
          </el-form-item>
          <el-form-item label="订阅须知" prop="subscriptionNote">
            <el-input type="textarea" v-model="form.subscriptionNote" :rows="3" />
          </el-form-item>
        </el-form>
  
        <template #footer>
                  <span v-if="currentDialogType !== 'detail'">
                      <el-button @click="dialogVisible = false">取消</el-button>
                      <el-button
                          type="primary"
                          @click="handleConfirmAction"
                          :loading="submitLoading"
                      >
                          确定
                      </el-button>
                  </span>
          <span v-else>
                      <el-button @click="dialogVisible = false">关闭</el-button>
                  </span>
        </template>
      </el-dialog>
    </el-container>
    <OrderManager v-if="pageid===1"></OrderManager>
    <KechengPingjia v-if="pageid===2"></KechengPingjia>
    <KechengFenlei v-if="pageid===3"></KechengFenlei>
    <KechengJiaoliu v-if="pageid===4"></KechengJiaoliu>
  </template>
  
  <script setup>
  import { ref, reactive, onMounted, watchEffect, defineProps,nextTick } from 'vue';
  import { ElMessage, ElMessageBox } from 'element-plus';
  import courseHttp from '@/http/http.js';
  import { Plus } from "@element-plus/icons-vue";
  import OrderManager from "@/views/KC/componentsc/OrderManager.vue";
  import KechengPingjia from "@/views/KC/componentsc/KechengPingjia.vue";
  import KechengFenlei from "@/views/KC/componentsc/KechengFenlei.vue";
  import KechengJiaoliu from "@/views/KC/componentsc/KechengJiaoliu.vue";
  // 新增响应式变量
  const contentArea = ref(null)
  const backgroundImage = ref('');
  const isAnimating = ref(false);
  const backgroundImagetitle=ref('');
  const pageid = ref(0);
  const consultantId = ref('');
  // 获取登录咨询师的 ID
onMounted(()=>{
  consultantId.value = JSON.parse(sessionStorage.getItem("consultant")).id;
  console.log(consultantId.value,"11111111111111111111111111111111111111111");
  fetchCourses(); 
})

  // 响应式数据
  const props = defineProps(["data"]);
  const imageUrl = ref(''); // 用于预览上传的图片
  const uploadRef = ref();
  const courses = ref([]);
  const loading = ref(false);
  const dialogVisible = ref(false);
  const currentDialogType = ref('add');
  const formRef = ref(null);
  const submitLoading = ref(false);
  const uploadUrl = '/api/upload'; // 文件上传接口
  const uploadHeaders = { Authorization: 'Bearer ' + localStorage.getItem('token') };
  const isContainerVisible = ref(true);
  // 分页配置
  const currentPage = ref(1);
  const pageSize = ref(100);
  const total = ref(0);
  
  // 搜索表单
  const searchForm = reactive({
    courseName: '',
    consultantId: ''
  });
  
  // 表单数据
  const form = reactive({
    id: null,
    courseName: '',
    videoFileName: '',
    image: '',
    originalPrice: 0,
    currentPrice: 0,
    intro: '',
    targetAudience: '',
    learningOutcomes: '',
    subscriptionNote: '',
    consultantId: '',
    categoryId: '',
    validityPeriod: 0,
    studyCount: 0,
    categoryName: '',
    consultantName: ''
  });
  
  // 表单验证规则
  const rules = reactive({
    courseName: [{ required: true, message: '请输入课程名称', trigger: 'blur' }],
    currentPrice: [{ required: true, message: '请输入现价', trigger: 'blur' }],
    categoryId: [{ required: true, message: '请输入分类编号', trigger: 'blur' }]
  });
  
  // API配置
  const api = {
    fetchCourses: (params) => courseHttp.get('/zh/course/page', { params }),
    searchCourses: (params) => courseHttp.get('/zh/course/search', { params }),
    addCourse: (form) => courseHttp.post('/zh/course', form, {
      headers: {
        // 修改请求头为 JSON 格式
        "Content-Type": "application/json"
      }
    }),
    updateCourse: (form) => courseHttp.put('/zh/course', form, {
      headers: {
        
        "Content-Type": "application/json"
      }
    }),
    deleteCourse: (id) => courseHttp.delete(`/zh/course/${id}`)
  };
  
  // 获取课程列表
  const fetchCourses = async () => {
    loading.value = true;
    try {
      const params = {
        pageNum: currentPage.value,
        pageSize: pageSize.value,
        ...searchForm
      };
      const res = await api.fetchCourses(params);
      if (res.code === 200) {
        courses.value = res.data.list;
        total.value = res.data.total;
        console.log(courses.value,"2222222222222222222222222222");
        courses.value = courses.value.filter(course => course.consultantId === consultantId.value);
        total.value = courses.value.length;
        console.log(courses.value,"111111111111111111111111");
        
        if (courses.value.length > 0 && courses.value[0].image) {
          backgroundImage.value = `http://localhost:8080/img?imgUrl=${courses.value[0].image}`;
        }
      }
    } catch (error) {
      handleError(error);
      // token
      console.log('Current token:', localStorage.getItem('token'))
    } finally {
      loading.value = false;
    }
  };
  
  // 初始化
 
  
  // 文件上传
  const beforeUpload = (file) => {
    const isImage = file.type.startsWith('image/');
    const isLt2M = file.size / 1024 / 1024 < 2;
  
    if (!isImage) {
      ElMessage.error('只能上传图片文件!');
      return false;
    }
    if (!isLt2M) {
      ElMessage.error('图片大小不能超过2MB!');
      return false;
    }
    return true;
  };
  
  // 自定义上传方法
  const customUpload = async (options) => {
    const { file } = options;
    const formData = new FormData();
    formData.append('file', file);
    formData.append('subPath', 'images/FC');
  
    try {
      const response = await fetch('/api/img', {
        method: 'POST',
        body: formData
      });
  
      const result = await response.json();
  
      if (result.code === 200) {
        // 上传成功，更新图片URL
        form.image = result.data;
        imageUrl.value = `http://localhost:8080/img?imgUrl=${result.data}`; // 使用GET接口获取图片
        ElMessage.success('图片上传成功');
      } else {
        ElMessage.error(result.message || '图片上传失败');
      }
    } catch (error) {
      ElMessage.error('上传过程中出现错误');
      console.error('Upload error:', error);
    }
  };
  
  watchEffect(() => {
    if (props.data) {
      form.value = {...props.data};
      imageUrl.value = props.data.image
          ? `http://localhost:8080/img?imgUrl=${props.data.image}`
          : '';
    }
  });
  
  const handleVideoUploadSuccess = (response) => {
    form.videoFileName = response.data.fileName;
  };
  
  const beforeVideoUpload = (file) => {
    const isVideo = file.type.startsWith('video/');
    if (!isVideo) {
      ElMessage.error('只能上传视频文件!');
    }
    return isVideo;
  };
  
  const handleSearch = async () => {
    try {
      loading.value = true;
      currentPage.value = 1;
      pageSize.value = 10;
  
      const params = {
        courseName: searchForm.courseName?.trim() ?? '',
        consultantId: searchForm.consultantId?.toString?.() ?? '',
        pageNum: 1,
        pageSize: pageSize.value
      };
      if (!params.courseName && !params.consultantId) {
        ElMessage.warning('请至少输入一个搜索条件');
        return;
      }
      const res = await api.searchCourses(params);
  
      if (!res.data || res.code !== 200) {
        throw new Error(res.message || '搜索失败');
      }
  
      courses.value = res.data.list || [];
      total.value = Number(res.data.total) || 0;
      if (courses.value.length > 0 && courses.value[0].image) {
        backgroundImage.value = `http://localhost:8080/img?imgUrl=${courses.value[0].image}`;
      }
    } catch (error) {
      handleError(error);
      courses.value = [];
      total.value = 0;
    } finally {
      loading.value = false;
    }
  };
  
  // 表单操作
  const handleAdd = () => {
    currentDialogType.value = 'add'
  
    // 重置表单数据
    form.value = {
      id: null,
      courseName: '',
      videoFileName: '',
      image: '',
      originalPrice: 0,
      currentPrice: 0,
      studyCount: 0,
      collectionCount: 0,
      reviewCount: 0,
      consultantId: '',
      consultantName: '',
      materialCount: 0,
      validityPeriod: 365,
      shangXianTime: new Date().toISOString().slice(0, 19),
      categoryId: '',
      intro: '',
      targetAudience: '',
      learningOutcomes: '',
      subscriptionNote: '',
      categoryName: ''
    }
  
    // 重置表单验证
    if (formRef.value) {
      formRef.value.resetFields()
    }
  
    dialogVisible.value = true
  }
  
  const handleEdit = (row) => {
    currentDialogType.value = 'edit';
    Object.assign(form, row);
    dialogVisible.value = true;
  };
  
  const handleDetail = (row) => {
    currentDialogType.value = 'detail';
    Object.assign(form, row);
    dialogVisible.value = true;
  };
  
  // 提交表单
  const handleConfirmAction = async () => {
    try {
      await formRef.value.validate();
      submitLoading.value = true;
  
      if (currentDialogType.value === 'add') {
        await api.addCourse(form);
        ElMessage.success('添加成功');
      } else {
        await api.updateCourse(form);
        ElMessage.success('更新成功');
      }
  
      dialogVisible.value = false;
      await fetchCourses();
    } catch (error) {
      if (error !== 'cancel') handleError(error);
    } finally {
      submitLoading.value = false;
    }
  };
  
  // 删除确认
  const handleDeleteConfirm = async (row) => {
    try {
      const confirmResult = await ElMessageBox.confirm(
          `确定删除课程【${row.courseName}】？`,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
      )
  
      // 只有当用户点击确定时才执行删除
      if (confirmResult === 'confirm') {
        await api.deleteCourse(row.id)
        ElMessage.success('删除成功')
        await fetchCourses()
      }
    } catch (error) {
      // 捕获取消操作和其他错误
      if (error !== 'cancel') {
        handleError(error)
      }
    }
  }
  // 分页控制
  const handleSizeChange = (val) => {
    pageSize.value = val;
    fetchCourses();
  };
  
  const handleCurrentChange = (val) => {
    currentPage.value = val;
    fetchCourses();
  };
  
  // 错误处理
  const handleError = (error) => {
    console.error('API Error:', error);
    ElMessage.error(error.message || '操作失败');
  };
  
  // 点击轮播图图片处理方法
  const handleImageClick = (imgUrl) => {
    // 找到当前点击的图片对应的课程
    const currentCourse = courses.value.find(course => course.image === imgUrl);
    if (currentCourse) {
      backgroundImagetitle.value = currentCourse.courseName;
      backgroundImage.value = `http://localhost:8080/img?imgUrl=${imgUrl}`;
      isAnimating.value = true;
      setTimeout(() => {
        isAnimating.value = false;
      }, 500); // 动画时长 500ms
    }
  };
  
  //展开收缩
  const shoufang = () => {
    isContainerVisible.value = !isContainerVisible.value;
  };
  
  const changepageid = (id) => {
    pageid.value = id
  
    // 使用 nextTick 确保 DOM 更新完成
    nextTick(() => {
      if (contentArea.value) {
        // 平滑滚动到目标区域
        contentArea.value.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        })
      }
    })
  }
  </script>
  
  <style scoped>
  .course-container {
    padding: 20px;
    background: #f5f7fa;
    min-height: 100vh;
  }
  
  .search-header {
    margin-bottom: 20px;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  
  .main-content {
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  }
  
  .thumbnail {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
  }
  
  .file-link {
    color: #409EFF;
    cursor: pointer;
  }
  .stats-row {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed #eee;
  }
  
  .stats-input {
    width: 100%;
    background-color: #f5f7fa;
    border: 1px solid #e4e7ed;
  }
  
  .stats-input .el-input__inner {
    background-color: transparent !important;
    border: none !important;
    text-align: right;
  }
  
  .stats-input .el-form-item__label {
    text-align: left !important;
  }
  
  .course-dialog {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  }
  
  .dialog-form {
    padding: 24px;
  }
  
  .price-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
  }
  
  .el-row {
    margin-bottom: 20px;
  }
  
  .el-col:last-child {
    margin-bottom: 0;
  }
  
  .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
  }
  
  .avatar-uploader {
    width: 100%;
    height: 120px;
    border: 1px dashed #d9d9d9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .avatar-uploader-icon {
    font-size: 48px;
    color: #8c939d;
  }
  
  .video-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #409EFF;
  }
  
  .el-form-item__label {
    font-weight: 500;
    color: #333;
  }
  
  .el-input-number {
    width: 100%;
  }
  
  .el-date-picker {
    width: 100%;
  }
  
  /* 详情模式样式覆盖 */
  .dialog-form .el-input.is-disabled input,
  .dialog-form .el-textarea.is-disabled textarea {
    background-color: #f5f7fa;
    color: #606266;
    border-color: #e4e7ed;
  }
  
  /* 响应式调整 */
  @media (max-width: 768px) {
    .el-col {
      width: 100% !important;
    }
  }
  
  .avatar-uploader-icon {
    font-size: 30px;
    color: #8c939d;
  }
  
  .video-uploader {
    margin-top: 10px;
  }
  
  .pagination-wrapper {
    margin-top: 20px;
    text-align: right;
  }
  
  .file-info {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .el-dialog__header {
    background-color: #f5f7fa;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
  }
  
  .avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
    text-align: center;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
  
  .container1-class {
    position: relative;
    background: white;
    height: 410px;
    transition: background-image 0.5s ease-in-out; /* 背景图片切换动画 */
    background-size:100% ;
    box-shadow: 1px 5px 5px 5px #ccc;
    border-radius: 8px;
  }
  
  .animate-bg {
    animation: scaleBg 0.5s ease-in-out; /* 放大动画 */
  }
  
  .el-carousel__item {
    white-space: nowrap;
    overflow: hidden;
  }
  
  .el-carousel__item img {
    vertical-align: top;
  }
  
  .carousel-wrapper {
    position: absolute;
    right: 20px;
    bottom: 20px;
    width: 400px; /* 可以根据需要调整宽度 */
  }
  
  @keyframes scaleBg {
    from {
      background-size: 0;
    }
    to {
      background-size: cover;
    }
  }
  .btn{
    border-radius: 10px;
    border: 1px solid #ccc;
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 2px 2px #8c8c8c;
  }
  .btn:hover{
  
    position: relative;
    top: -1px;
    cursor: pointer;
  }
  
  </style>